<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>6-交通大学案例</title>
    <style>
        *{
            margin:0;
            padding:0;
            font-family: 'Micorsoft yahei';
        }
        a{
            text-decoration: none;
        }
        .box{
            width: 978px;
            height:198px;
            border: 1px solid red;
            margin:30px auto;
            box-sizing: border-box;
            padding:25px 29px 0 29px;
        }
        p.bread{
            border-bottom: 1px solid #b3b3b3;
            /* 清除浮动，让拥有浮动子元素的父盒子有高度(适应子盒子的高度) */
            overflow: hidden;
        }
        span.news{
            font-size:17px;
            color: #b12922;
            font-weight: bold;
            padding-bottom: 13px;
            border-bottom: 3px solid #b12922;
            /* 向左浮动 */
            float: left;
        }
        span.location{
            font-size:11px;
            color:#888888;
            /* 向右浮动 */
            float:right;
        }
        span.location a{
            font-size:11px;
            color:#888888;
        }
        /* 
            浮动:
            属性float:left/right;
         */
        p.school{
            text-align: center;
            font-size:23px;
            font-weight: bold;
            color: #000;
            padding: 38px 0 12px 0;
            border-bottom: 1px dashed #888888;
        }
        p.source{
            text-align: center;
            border-bottom: 1px dashed #888888;
            padding:9px 0 12px 0;
        }
        p.source span{
            color: #666666;
            font-size:11px;
            margin-right: 36px;
        }
        p.source span.last{
            margin-right:0px;
        }
    </style>
</head>
<body>
    <div class="box">
        <p class="bread">
            <span class="news">主页新闻</span>
            <span class="location">当前位置：<a href="">新闻网首页</a>><a href="">主页新闻</a>>正文</span>
        </p>
        <p class="school">【陕西高教】燕连福：抓好三个“融入”推动研究生思政教育高质量发展</p>
        <p class="source">
            <span>来源：陕西高教</span><span>日期：2022-03-18 11:25</span><span class="last">浏览量：489</span>
        </p>
    </div>
</body>
</html>